<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>

<div th:fragment="today">
    <style>
        .today {
            height: 30px;
            color: #fff;
            font-size: 20px;
            text-align: center;
            font-family: "Microsoft Yahei", sans-serif;
        }
    </style>
    <div class="today">
        <span class="rq">9月8日</span>
        <span class="xq">周五</span>
        <span class="sj">17:26:07</span>
    </div>
    <script>
        var sj = document.querySelector('.sj'),
            rq = document.querySelector('.rq'),
            xq = document.querySelector('.xq');

        //格式化时间
        function fromat(v) {
            return v < 10 ? '0' + v : v;
        }
        //格式化星期
        function formatWeek(v) {
            return ['日', '一', '二', '三', '四', '五', '六'][v];
        }

        //即时日期
        const d1 = new Date();
        //d1.getFullYear() + '年'
        rq.innerHTML = (d1.getMonth() + 1) + '月' + d1.getDate() + '日'
        xq.innerHTML = '周' + formatWeek(d1.getDay())

        //即时时间
        function time() {
            var d = new Date();
            sj.innerHTML = fromat(d.getHours()) + ':' + fromat(d.getMinutes()) + ':' + fromat(d.getSeconds());
        }

        time();

        setInterval(time, 1000);
    </script>
</div>
</body>
</html>